import HeaderUserCenter from "@/components/HeaderUserCenter/HeaderUserCenter";
import { defineComponent, ref, KeepAlive } from "vue";
import { useRoute, useRouter } from "vue-router";
import styles from "./userCenter.module.less";
import { useStore as useUserStore } from "@/store/user";
import Footer from "@/components/Footer/Footer";
import LIcon from "@/components/public/lIcon/lIcon";
import { imgPath } from "@/common/utils";
import checkAuth from "@/common/checkAuth";
import LoginPopup from "@/components/LoginPopup/LoginPopup";
import { useStore as useCacheViewStore } from "@/store/cacheView";
export default defineComponent({
  name: 'userCenter',
  setup() {
    const userStore = useUserStore();
    const router = useRouter();
    const route = useRoute();
    const cacheViewStore = useCacheViewStore();

    const menuTreeState = ref([
      {
        name: '订单管理',
        icon: () => <LIcon class={styles.icon} type="icon-dingdanguanli" />,
        auth: '订单管理',
        children: [
          {
            name: '旅责险订单',
            path: '/userCenter/duty',
            auth: '旅责险订单',
          },
          {
            name: '意外险订单',
            path: '/userCenter/AccidentList',
            auth: '意外险订单',
          },
          {
            name: '订单导出历史',
            path: '/userCenter/ExportApplicate',
            auth: '订单导出历史',
          },
        ]
      },
      {
        name: '发票管理',
        icon: () => <LIcon class={styles.icon} type="icon-fapiaoguanli" />,
        auth: '发票管理',
        children: [
          {
            name: '申请开票',
            path: '/userCenter/applyInvoice',
            auth: '申请开票',
          },
          {
            name: '开票历史',
            path: '/userCenter/invoiceHistory',
            auth: '开票历史',
          },
        ]
      },
      {
        name: '企业钱包',
        icon: () => <LIcon class={styles.icon} type="icon-qiyeqianbao" />,
        auth: '企业钱包',
        children: [
          {
            name: '充值记录',
            path: '/userCenter/PrePaidDepositAccount',
            auth: '充值记录',
          },
          {
            name: '交易记录',
            path: '/userCenter/transactionRecords',
            auth: '交易记录',
          }
        ]
      },
      {
        name: '账号管理',
        icon: () => <LIcon class={styles.icon} type="icon-pidanguanli" />,
        auth: '账号管理',
        children: [
          {
            name: '角色管理',
            path: '/userCenter/Roles',
            auth: '角色管理',
          },
          {
            name: '账号管理',
            path: '/userCenter/FinancialAuthorization',
            auth: '账号管理',
          },
        ]
      },
      {
        name: '分社管理',
        icon: () => <LIcon class={styles.icon} type="icon-fensheguanli" />,
        auth: '分社管理',
        children: [
          {
            name: '分社关联',
            path: '/userCenter/BranchList',
            auth: '分社关联',
          },
        ]
      },
      {
        name: '我的索赔',
        icon: () => <LIcon class={styles.icon} type="icon-wodesuopei" />,
        auth: '我的索赔',
        children: [
          {
            name: '索赔详情',
            path: '/userCenter/myCase',
            auth: '索赔详情',
          },
        ]
      },
      // {
      //   name: '产品收藏',
      //   icon: () => <LIcon class={styles.icon} type="icon-chanpinshoucang" />,
      //   auth: '产品收藏',
      //   children: [
      //     {
      //       name: '我的收藏',
      //       path: '/userCenter/MyCollection',
      //       auth: '我的收藏',
      //     },
      //   ]
      // },
      // {
      //   name: '评价中心',
      //   icon: () => <LIcon class={styles.icon} type="icon-pingjiazhongxin" />,
      //   auth: '评价中心',
      //   children: [
      //     {
      //       name: '投保服务评价',
      //       path: '/userCenter/evaluationList',
      //       auth: '投保服务评价',
      //     },
      //     {
      //       name: '案件服务评价',
      //       path: '/userCenter/caseEvaluationList',
      //       auth: '案件服务评价',
      //     },
      //   ]
      // },
    ])

    const menuItemClick = (path: string) => {
      const dom: any = document.getElementById("app");
      dom.scrollTop = 0;
      router.push(path);
    }

    const terms = ref([
      {
        name: '下载旅意团险经纪服务委托协议',
        download_url: '',
      },
      {
        name: '下载旅游者案件处理手册',
        download_url: '',
      },
      {
        name: '隐私保护声明',
        download_url: '',
      },
    ])

    // 主体部分
    const Main = () => (
      <div class={styles.main}>
        <div class={styles['main-container']}>
          <div class={styles['main-menu']}>
            {
              menuTreeState.value.map((itemX) => (
                checkAuth(itemX.auth) && <div class={styles.submenu}>
                  <div class={styles['submenu-title']}>
                    {
                      itemX?.icon?.()
                    }
                    <span>{itemX.name}</span>
                  </div>
                  <div class={styles['menu-group']}>
                    {
                      itemX?.children?.map((itemY) => (
                        checkAuth(itemY.auth) && <div class={[styles['menu-item'], route.fullPath === itemY.path && styles.checked]} onClick={() => { menuItemClick(itemY.path) }}>{itemY.name}</div>
                      ))
                    }
                  </div>
                </div>
              ))
            }
            {/* <div class={styles['menu-footer']}>
              {
                terms.value.map((item) => (
                  <div class={styles['menu-footer-item']} onClick={() => { window.open(item.download_url) }}>
                    {item.name}
                  </div>
                ))
              }

            </div> */}
          </div>
          <div class={styles['main-content']}>
            <router-view>
              {
                ({ Component, route }: { Component: any, route: any }) => {
                  return (
                    <KeepAlive include={cacheViewStore.cacheView}>
                      <Component key={route.name} />
                    </KeepAlive>
                  )
                }
              }
            </router-view>
          </div>
        </div>
      </div>
    )

    // 跳转客服聊天
    const toContactChat = () => {

    }

    // 客服悬浮标
    const Contact = () => (
      <img class={styles['contact-float']} src={imgPath('/contact-float.png')} onClick={() => toContactChat()} />
    )

    //执行登录
    const toLogin = () => {
      LoginPopupRef.value.open();
    }

    const LoginPopupRef = ref(null as any);

    return () => (
      <div class={styles.userCenter} id="userCenterScroll">
        <HeaderUserCenter onToLogin={() => { toLogin() }} />
        <Main />
        <Footer />
        <Contact />
        <LoginPopup ref={LoginPopupRef} />
      </div>
    )
  }
})